<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 头部区域 -->
      <div
        slot="header"
        class="clearfix"
      >
        <span>试题录入</span>
      </div>
      <!-- 表单区域 -->
      <el-form
        class="formItem"
        :rules="rules"
        ref="form"
        :model="form"
        label-width="100px"
      >
        <!-- 学科 -->
        <el-form-item
          label="学科："
          prop="subjectID"
        >
          <el-select
            v-model="form.subjectID"
            placeholder="请选择"
            style="width: 350px"
          >
            <el-option
              v-for="(items) in subjectList"
              :key="items.id"
              :value="items.value"
              :label="items.label"
            ></el-option>

          </el-select>
        </el-form-item>
        <!-- 目录 -->
        <el-form-item
          label="目录："
          prop="catalogID"
        >
          <el-select
            v-model="form.catalogID"
            placeholder="请选择"
            style="width: 350px"
          >
            <el-option
              :label="item.subjectName"
              :value="item.id"
              v-for="item in subjectLabel"
              :key="item.id"
            >{{item.subjectName}}</el-option>
          </el-select>
        </el-form-item>
        <!--企业  -->
        <el-form-item
          label="企业："
          prop="enterpriseID"
        >
          <el-select
            v-model="form.enterpriseID"
            placeholder="请选择"
            style="width: 350px"
          >
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :value="item.id"
              :label="item.company"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市 -->
        <el-form-item
          label="城市："
          prop="province"
        >
          <el-col :span="5">
            <el-select
              v-model="form.province"
              placeholder="请选择省份"
              @change="provincesBtn(form.province)"
            >
              <el-option
                v-for="(item,index) in provinces"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-col>
          <el-col
            style="city"
            :span="1"
          ></el-col>
          <el-col :span="5">
            <el-select
              v-model="form.city"
              placeholder="请选择城市"
            >
              <el-option
                v-for="(item,index) in citys"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!-- 方向 -->
        <el-form-item
          label="方向:"
          prop="direction"
        >
          <el-select
            v-model="form.direction"
            placeholder="请选择"
            style="width: 350px"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in direction"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 题型 -->
        <el-form-item
          label="题型："
          prop="questionType"
        >
          <el-radio-group
            v-model="form.questionType"
            @change="radio(form.questionType)"
          >
            <el-radio
              v-for="(item,index) in questionType"
              :key="index"
              :label="item.value"
            >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item
          label="难度："
          prop="difficulty"
        >
          <el-radio-group v-model="form.difficulty">
            <el-radio
              v-for="(item) in difficulty"
              :key="item.value"
              :label="item.value"
            >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item
          label="题干："
          prop="question"
        >
          <!-- 编辑 -->
          <questionsNew
            v-model="form.question"
            style="height: 350px"
          />
        </el-form-item>

        <!-- 选项 -->

        <el-row v-if="radioCheck">
          <el-col>
            <el-form-item label="选项：">
              <el-row v-if="btnShow">
                <el-col
                  class="el-cols"
                  v-for="(item, index) in options"
                  :key="index"
                >
                  <el-radio-group v-model="form.options">
                    <el-radio :label="item">
                      {{ item.code + `: ` }}<el-input
                        v-model="item.title"
                        style="width: 240px; line-height: 60px;margin-top:10px"
                      ></el-input>
                    </el-radio>
                  </el-radio-group>
                  <div
                    class="fileBtn"
                    @click="uploadPhoto(index)"
                  >
                    上传照片
                    <div class="fileBtn-delete">×</div>
                  </div>
                </el-col>

                <input
                  type="file"
                  ref="fileBtn"
                  style="display: none"
                  @change="upload"
                />
              </el-row>
              <el-row v-else>

                <input
                  type="file"
                  ref="fileBtn"
                  style="display: none"
                  @change="upload"
                />
                <el-col
                  class="el-cols"
                  v-for="(item, index) in options"
                  :key="index"
                >
                  <el-checkbox-group v-model="form.options">
                    <el-checkbox :label="item.code">
                      {{ item.code+ `: ` }}<el-input
                        v-model="item.title"
                        style="width: 240px; line-height: 60px;margin-top:10px"
                      ></el-input>
                    </el-checkbox>
                  </el-checkbox-group>
                  <div
                    class="fileBtn"
                    @click="uploadPhoto(index)"
                  >
                    上传照片
                    <div class="fileBtn-delete">×</div>
                  </div>
                  <!-- <el-upload
                    class="avatar-uploader"
                    list-type="text"
                    action="#"
                    :show-file-list="false"
                  >
                    上传图片
                    <i class="icon">x</i>
                  </el-upload> -->
                </el-col>
              </el-row>
              <el-col>
                <el-button
                  type="danger"
                  size="small "
                  :disabled="btnShow"
                  @click="addBtn"
                >+增加选项和答案</el-button>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 解析视频 -->
        <el-form-item
          label="解析视频："
          style="height: 50px"
        >
          <el-input
            v-model="form.videoURL"
            style="width: 350px"
          />
        </el-form-item>

        <!-- 答案解析 -->
        <el-form-item
          label="答案解析："
          prop="answer"
        >
          <!-- 编辑 -->
          <questionsNew
            v-model="someText"
            style="height: 350px"
          />
        </el-form-item>

        <!-- 题目备注 -->
        <el-form-item label="题目备注：">
          <el-input
            v-model="form.remarks"
            type="textarea"
            :rows="5"
            style="width: 350px"
          ></el-input>
        </el-form-item>
        <!-- 试题标签  -->
        <el-form-item label="试题标签:">
          <el-select
            v-model="form.tags"
            placeholder="请选择"
            style="width: 350px"
            multiple
          >
            <el-option
              v-for="(item,index) in tags"
              :key="index"
              :label="item"
              :value="item"
            >

            </el-option>
          </el-select>
        </el-form-item>

        <!-- 按钮 -->
        <el-form-item style="margin-left:45px">
          <el-button
            type="primary"
            size="small"
            @click="submitBtn()"
          >确认提交</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>
import questionsNew from '@/components/questionsNew'
// 获取企业管理列表
import { list } from '@/api/hmmm/companys'
// 学科
import { simple } from '@/api/hmmm/subjects'
// 城市
import { provinces, citys } from '@/api/hmmm/citys'
// 方向，题型，难度
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
// 添加
import { add } from '@/api/hmmm/questions'

// 基础题库
import { list as questionList } from '@/api/hmmm/directorys'
// import { tagsList } from '@/api/hmmm/tags'
// 引入腾讯云包
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKID5zd190auwhBPM2RaR2MO9esoUt1sTmoZ',
  SecretKey: 'VjgNnxqSnshFWWFhsmQmrfDUUDgrlOls'
})
export default {
  components: {
    questionsNew
  },
  data () {
    return {
      form: {
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 企业
        enterpriseID: '',
        // 省份
        province: '',
        // 城市
        city: '',
        // 方向
        direction: '',
        // 题型
        questionType: 1,
        // 难度
        difficulty: 1,
        // 题干
        question: '',
        // 解析视频
        videoURL: '',
        // 答案解析
        answer: '',
        // 题目备注
        remarks: '',
        // 试题标签
        tags: '',
        // 选项
        options: []
      },
      // 学科列表
      subjectList: [],
      // 目录
      subjectLabel: [],
      // 基础题库
      getlist: [],
      // 企业数据
      companyList: [],
      // 接收所有城市
      provinces: [],
      // 接收城市下的地区
      citys: [],
      // 方向
      direction: [],
      // 题型
      questionType: [],
      // 难度
      difficulty: [],
      // 试题标签
      tags: [111, 122],
      // 组件
      someText: [],
      // 单选控制
      radioCheck: true,
      btnShow: true,
      // 上传的文件列表
      fileList: [],
      // 获取当前点击的索引
      index: [],
      // 选项
      options: [
        { isRigth: false, code: 'A', title: '', img: '' },
        { isRigth: false, code: 'B', title: '', img: '' },
        { isRigth: false, code: 'C', title: '', img: '' },
        { isRigth: false, code: 'D', title: '', img: '' }
      ],
      // 校验规则
      rules: {
        // 学科
        subjectID: [{
          required: true, message: '请选择学科', trigger: 'change'
        }],
        // 目录
        catalogID: [{
          required: true, message: '请选择目录', trigger: 'change'
        }],
        // 企业
        enterpriseID: [{
          required: true, message: '请选择企业', trigger: 'change'
        }],
        // 地区
        province: [{
          required: true, message: '请选择地区', trigger: 'change'
        }],
        // 方向
        direction: [{
          required: true, message: '请选择方向', trigger: 'change'
        }],
        // 题型
        questionType: [{
          required: true, message: '请选择题型', trigger: 'change'
        }],
        // 难度
        difficulty: [{
          required: true, message: '请选择难度', trigger: 'change'
        }],
        // 题干
        question: [{
          required: true, message: '请选择题干', trigger: 'change'
        }],
        // 解析视频
        videoURL: [{}],
        // 答案解析
        answer: [{
          required: true, message: '请选择题干', trigger: 'change'
        }],
        // 题目备注
        remarks: [{}],
        // 试题标签
        tags: [111, 222]
      }
    }
  },
  created () {
    // 获取学科
    this.simple()
    // 获取企业基本信息
    this.list()
    // 获取所有城市
    this.getAllcity()
    this.qsList()
    // 获取方向信息
    this.direction = direction
    // 获取题型
    this.questionType = questionType
    // 获取难度
    this.difficulty = difficulty
    // console.log(this.difficulty)
  },
  methods: {
    // 获取基本题库
    async qsList () {
      const { data } = await questionList()
      this.subjectLabel = data.items
      // console.log(this.subjectLabel)
    },

    // 获取企业基本信息
    async list () {
      try {
        const { data } = await list()
        this.companyList = data.items
      } catch (error) {
        this.$message.error(error)
      }
    },

    // 获取学科
    async simple () {
      try {
        const { data } = await simple()
        this.subjectList = data
      } catch (error) {
        this.$message.error(error)
      }
    },

    // 获取所有城市
    async getAllcity () {
      try {
        this.provinces = await provinces()
        // console.log(this.provinces)
      } catch (error) {
        this.$message.error(error)
      }
    },

    // 获取城市下的地区
    async provincesBtn (item) {
      try {
        this.citys = await citys(item)
        // console.log(this.citys);
      } catch (error) {
        this.$message.error(error)
      }
    },

    // 监听题型单选按钮的变化
    radio (qt) {
      // console.log(qt)  默认显示单选：1
      if (qt === 1) {
        this.radioCheck = true
        this.btnShow = true
        this.newOptions()
      } else if (qt === 2) {
        this.radioCheck = true
        this.btnShow = false
        this.newOptions()
      } else {
        this.radioCheck = false
        this.newOptions()
      }
    },
    newOptions () {
      this.options = [
        { isRigth: false, code: 'A', title: '', img: '' },
        { isRigth: false, code: 'B', title: '', img: '' },
        { isRigth: false, code: 'C', title: '', img: '' },
        { isRigth: false, code: 'D', title: '', img: '' }
      ]
      this.form.options = []
    },
    // 添加
    addBtn () {
      this.options.push({
        isRigth: false,
        code: String.fromCharCode(65 + this.options.length),
        title: '',
        img: ''
      })
    },
    // // 点击上传照片
    uploadPhoto (index) {
      this.$refs.fileBtn.click()
      this.index = index
      // console.log(this.index)
    },
    // 上传至腾讯云
    upload (params) {
      if (params.file) {
        this.fileList = params.file
        // 执行上传操作
        cos.putObject({
          Bucket: 'mianmian-1306982360', /* 必须 */
          Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
          Key: params.file.name, /* 必须.  文件名  */
          StorageClass: 'STANDARD',
          Body: params.file // 上传文件对象
        }, (err, data) => {
          if (!err && data.statusCode === 200) {
            // 成功
            this.options[this.index].img = 'http://' + data.Location
          }
        })
      }
    },
    // 提交
    async submitBtn () {
      const param = {
        subjectID: this.form.subjectID,
        catalogID: this.form.catalogID,
        enterpriseID: this.form.enterpriseID,
        province: this.form.province,
        city: this.form.city,
        direction: this.form.direction,
        questionType: toString(this.form.questionType),
        difficulty: toString(this.form.difficulty),
        question: JSON.stringify(this.form.question),
        videoURL: this.form.videoURL,
        answer: JSON.stringify(this.form.answer),
        remarks: this.form.remarks,
        tags: toString(this.form.tags),
        isPerfect: this.form.isPerfect,
        options: []
      }
      console.log('submit', param)
      const res = await add(param)
      console.log(res)
      this.$message.success('提交成功')
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before {
  display: table;
  content: "";
}

.box-card {
  margin: 20px 15px;
}

.formItem {
  padding-left: 65px;
}

.city {
  padding: 0 20px;
}

.icon {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 12px;
  height: 12px;
  border: 1px solid #9ca3c1;
  border-radius: 9px;
  background-color: #fff;
  z-index: 99;
  line-height: 6px;
  color: #9ca3c1;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  position: relative;
  width: 85px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  margin-left: 8px;
}

.fileBtn {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 60px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  text-align: center;
  line-height: 60px;
  margin-left: 5px;
}
.fileBtn-delete {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 16px;
  height: 16px;
  border: 1px solid #9ca3c1;
  border-radius: 9px;
  background-color: #fff;
  z-index: 99;
  line-height: 15px;
  color: #9ca3c1;
}
.fileBtn:hover {
  border: 1px dashed #409eff;
}
</style>
